<template>
  <view class="historyDetailContainer">
    <cunstom_navigation_bar :tapEvent="goback" :title="`厨师详情`" :propStyles="propStyles">
    </cunstom_navigation_bar>
    <view class="contentBox">
      <view class="topBg">
        <image class="bg" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/bg.png" mode="widthFix"></image>
        <view class="personalInfo">
          <view class="line1">
            <image class="bg" :src=" imgDomain + cookInfo.image  " mode="aspectFill">
            </image>
            <view class="middle">
              <view class="m-1">
                {{cookInfo.name}}<view class="score">{{cookInfo.grade}}分</view>
              </view>
              <view class="m-2">
                <view class="m-2-type">实名认证</view>
                <view class="m-2-type">{{cookInfo.cook_age}}年龄厨</view>
              </view>
              <view class="m-3">服务费{{cookInfo.fee}}</view>
            </view>
            <view class="right">
              <view class="r-1">
                <image class="like" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/no_like.png"
                  mode="widthFix">
                </image>
                <view class="r-1-r">
                  <view class="line1">11人</view>
                  <view class="line2">已收藏</view>
                </view>
              </view>
              <view class="r-2">距你{{dis}}公里</view>
            </view>
          </view>
          <view class="line2">
			  <!--
            <image class="dish" v-for="(item,index) in cookDataList" :src="imgDomain + item.images" mode="widthFix">
            </image>
			-->
            <image class="dish" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/cai1.png" mode="widthFix">
            </image>
            <image class="dish" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/cai2.png" mode="widthFix">
            </image>
            <image class="dish" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/cai3.png" mode="widthFix">
            </image>
			
          </view>
          <view class="line3">
            <view class="advantage">
              <image class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/icon1.png"
                mode="widthFix">
              </image>
              <span>证件齐全</span>
            </view>
            <view class="advantage">
              <image class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/icon2.png"
                mode="widthFix">
              </image>
              <span>专业培训</span>
            </view>
            <view class="advantage">
              <image class="icon1" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/icon1.png"
                mode="widthFix">
              </image>
              <span>保险保障</span>
            </view>

          </view>

        </view>
      </view>
      <view class="mouduleLine">
        <view class="mouduleBox">

          <view class="moudule" :class="selectedIndex == index?'selected':''" v-for="(item,index) in mouduleTypes"
            @tap="changeIndex(index)">
            {{item.name}}

          </view>

        </view>

      </view>

      <view class="content">
        <view v-if="selectedIndex==0" class="cookInfo">
          <view class="infoDetail">
            <view class="head">擅长菜系</view>
            <view class="info">{{getCuisineByIds(cookInfo)}}</view>
          </view>
          <view class="infoDetail">
            <view class="head">职业履历</view>
            <view class="info">{{cookInfo.job_desc}}<view class="label">15年高级厨师</view>
            </view>
          </view>
          <view class="infoDetail">
            <view class="head">证书&荣誉</view>
            <view class="info">
              <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/certificate.png" class="icon"></image>
              三级厨师证
            </view>
          </view>
          <view class="infoDetail">
            <view class="head">健康证</view>
            <view class="info">
              <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/health.png" class="icon"></image>
              健康证已审核
            </view>
          </view>
        </view>
        <view v-if="selectedIndex==1" class="works">
          <!--
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/work1.png"></image>
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/work2.png"></image>
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/work3.png"></image>
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/work4.png"></image>
		  -->
          <image v-for="(item,index) in cookDataList" :src="imgDomain + item.images"></image>

        </view>
        <view v-if="selectedIndex==2" class="comment">
          <view class="head">
            <view class="left">用户评价</view>
            <view class="right">17人已评价</view>
          </view>
          <view class="commentLine">
            <view class="title">味 道</view>
            <view class="stars">
              <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/star.png" v-for="(item,index) in score_star_1">
              </image>
            </view>
          </view>
          <view class="commentLine">
            <view class="title">品 相</view>
            <view class="stars">
              <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/star.png" v-for="(item,index) in score_star_2">
              </image>
            </view>
          </view>
          <view class="commentLine">
            <view class="title">服务态度</view>
            <view class="stars">
              <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/star.png" v-for="(item,index) in score_star_3">
              </image>
            </view>
          </view>
        </view>
        <view v-if="selectedIndex==3" class="time">

          <calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change"
            :startDate="startDate" @monthSwitch="monthSwitch" />
        </view>

      </view>
    </view>
    <view class="zhanwei">

    </view>
    <view class="fixBar">
      <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/booking.png" @tap="book"></image>

    </view> 
	
	
	<view class="specificationsMask" catchtouchmove='true' v-if="showSpecificationsPopup">
	  <view class="mask" @click="showSpecificationsPopup =false"></view>
	  <view class="specificationsPopup">
	
	    <view class="productInfo">
	      <image :src="imgDomain + cookInfo.avatar" class="selectedImg">
	      </image>
	      <view class="middleTxt">
	        <view class="productName">请选择规格，代购食材</view>
	        <view class="type">1件超值换购</view>
	        <view class="price">￥{{price}}</view>
	      </view>
	
	    </view>
	    <view class="specifications">
	      <view class="title">规格</view>
	      <view class="speciLine">
	        <view :class="currentType == idx?'eachSelected':'each'" v-for="(item,idx) in typeList" @tap="selectType(idx)"> {{ item.goods_sku_text}} </view>
	      </view>
	    </view>
	    <view class="specifications">
	      <view class="title">代购食材</view>
	      <view class="speciLine">
	        <view :class="currentBuy == idx?'eachSelected':'each'" v-for="(item,idx) in buyList" @tap="selectBuy(idx)">{{ item.name }}</view>
	
	      </view>
	    </view>
	
		<!--
	    <view class="productQuantity">
	      <view class="left">
	        <view class="title">购买数量</view>
	      </view>
	      <view class="right">
	        <view class="add" @tap="changeCurrentNum(-1)">-</view>
	        <view class="currentNum">
	          {{currentNum}}
	        </view>
	        <view class="subtraction" @tap="changeCurrentNum(1)">+</view>
	      </view>
	    </view>
		-->
		
	    <view class="specifications">
	      <view class="title">
	        预约时间<span style="color: red;">*</span>
	      </view>
			<uni-datetime-picker type="datetime" :clear-icon="false" v-model="pickUpTime" :start="'{{startDate}}'"
				@change="chooseTime">
				<view class="bar"> 
					<view class="left">{{pickUpTime?pickUpTime:'选择预约时间'}}</view>
					<image src="https://visionmpapi.jiuerjindi.com/upload/mp/cook/timeIcon.png">
				</view>
			</uni-datetime-picker>
	    </view>
	    <view class="buttons">
	      <view class="buy" @tap="submit()">确定</view>
	    </view>
	  </view>
	</view>  
	</view>
  
  </view>
</template>
<script>
  const api = require("@/utils/api.js");
  const util = require("@/utils/util.js");
  const app = getApp();
  export default {
    data() {
      return {
        id: null,
        imgDomain: '',
        cookInfo: null,
        cuisineList: [], // 菜系
        cookDataList: [], // 作品
        cookList: [], // 菜肴
        info: {
          lunar: true,
          range: true,
          insert: false,
          selected: []
        },
        datetimesingle: '',
        selectedIndex: 0,
        mouduleTypes: [
          {
            name: '厨师详情'
          },
          {
            name: '厨师作品'
          },
          {
            name: '评价声明'
          },
          {
            name: '服务时间'
          },

        ],
        startDate: '',
        propStyles: {
          iconSrc: "yellow",
          zhanweiColor: '#FFFFFF',
          txtColor: '#FFFFFF',
          bgColor: 'transparent',
          // bgSrc: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg1.png",
          // bgSrc1: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg2.png"
        },
        showSpecificationsPopup: false,
        typeList: [], // 规格
        buyList: [], // 代购
        currentType: 0,
        currentBuy: 0,
        price: 0,
        pickUpTime: '',
        currentNum: 1,
		addressSelect: null,
		dis: 0 , // 距离
		score_star_1: "", // 味道
		score_star_2: "", // 品相
		score_star_3: "", // 服务态度
		
      }


    },
    methods: {
	  chooseTime(event){
			
	  },
      getToday() {
        let date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        return `${year}-${this.addZero(month)}-${this.addZero(day)}`
      },
      addZero(num) {
        if (num < 10) {
          num = `0${num}`
        }
        return num
      },
      open() {
        this.$refs.calendar.open()
      },
      close() {
        console.log('弹窗关闭');
      },
      change(e) {
        console.log('change 返回:', e)
        // 模拟动态打卡
        if (this.info.selected.length > 5) return
        this.info.selected.push({
          date: e.fulldate,
          info: '迁到'
        })
      },
      confirm(e) {
        console.log('confirm 返回:', e)
      },
      monthSwitch(e) {
        console.log('monthSwitchs 返回:', e)
      },
      /**
     * 获取任意时间
     */
      getDate(date, AddDayCount = 0) {
        if (!date) {
          date = new Date()
        }
        if (typeof date !== 'object') {
          date = date.replace(/-/g, '/')
        }
        const dd = new Date(date)

        dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

        const y = dd.getFullYear()
        const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
        const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
        return {
          fullDate: y + '-' + m + '-' + d,
          year: y,
          month: m,
          date: d,
          day: dd.getDay()
        }
      },
      // 根据ids 获取菜品信息
      getCuisineByIds(item) {
        let result = "";
        let ids = "";
        if (item) {
          ids = item.cuisine_ids;
        }
        let b = ids.split(",");
        let a = this.cuisineList;
        console.log("->this.cuisineList.length:" + this.cuisineList.length);
        for (let i = 0; i < b.length; i++) {
          const id = b[i];
          for (let j = 0; j < a.length; j++) {
            if (a[j].id === id) {
              result = result + a[j].name + " ";
            }
          }
        }
        // 返回结果数组
        return result;
      },
      // 作品
      getCookData() {
        try {
          this.cookDataList = JSON.parse(this.cookInfo.show_data);
		  if(this.cookInfo.images){
			this.cookList = this.cookInfo.images.split(",");
		  }
        } catch (e) {
          console.log(e);
        }
      },
      getCuisineList() {
        let params = { page: 1, limit: 1000 };
        util.request(api.cuisineList, params
          , 'GET', 'application/json').then(res => {
            if (res.code == 200) {
              //this.cuisineList = res.data.data;
              this.cuisineList = this.cuisineList.concat(res.data.data);
            }

          }).catch((err) => {
            console.log('err', err)

          });
      },

      goback() {
        uni.navigateBack()
      },
      changeIndex(index) {
        this.selectedIndex = index
      },

	  getCook(id){
		  let params = {id:id};
		  util.request(api.getCook,params
		    , 'GET', 'application/json').then(res => {
		      if (res.code == 200) {
		        this.cookInfo = res.data;
				
				this.getCookData();
				// 距离
				this.dis = util.getDistance(app.globalData.latitude,app.globalData.longitude, parseFloat(this.cookInfo.latitude),parseFloat(this.cookInfo.longitude));
				console.log("----> dis:" + this.dis);
				// 评价
				if(this.cookInfo.score_star){
					let scoreStar = this.cookInfo.score_star.split(',');
					this.score_star_1 = scoreStar[0];
					this.score_star_2 = scoreStar[1];
					this.score_star_3 = scoreStar[2];
				}else{
					this.score_star_1 = 0;
					this.score_star_2 = 0;
					this.score_star_3 = 0;
				}
		      } 
		    }).catch((err) => {
		      console.log('err', err)
		  
		    }); 
	  },
	  // 购买数量
	  changeCurrentNum(num){
		  this.currentNum = this.currentNum +num;
		  if(this.currentNum<=1){
			  this.currentNum = 1;
		  }
		  this.price = this.typeList[this.currentType].price * this.currentNum;
	  },
	  // 预约
	  showCook(item){
		  this.selectType(0);
		  this.selectBuy(0);
		  this.currentNum = 1;
		  this.changeCurrentNum(0);
		  
		  
		  this.showSpecificationsPopup=true;
		  this.cookInfo = item;
	  },
      selectType(idx){
		this.currentType = idx;
		if(this.typeList){
			this.price = this.typeList[idx].price;
		}
		this.currentNum = 1;
	  },
      selectBuy(idx){
		this.currentBuy = idx;
	  },
	  getSku(){
		 let params = {};
		 util.request(api.getSku, params
		   , 'GET', 'application/json').then(res => {
		     if (res.code == 200) {
		       this.typeList = res.data.listPrice;
		       this.buyList = res.data.listData;
			   
			   // 初始化价格
			   this.selectType(0);
		     } 
		 
		   }).catch((err) => {
		     console.log('err', err)
		 
		   }); 
	  },
	  // 预约
	  book(){
		this.showSpecificationsPopup = true;
	  },
	  submit(){
		if(this.pickUpTime==''){
			util.toast('预约时间不能为空')
			return;
		}
		// 预约时间
		uni.setStorageSync('cookTime',this.pickUpTime);
		// 规格
		let type = this.typeList[this.currentType] ;
		uni.setStorageSync('currentType',type);
		// 食材
		let buy = this.buyList[this.currentBuy] ;
		uni.setStorageSync('currentBuy',buy);
		// 价格
		uni.setStorageSync('price',this.price);
		// 厨师id 
		uni.setStorageSync('cook_id',this.id);
		
		uni.navigateTo({
			url: `/page_bookDetail/bookDetail?id=`+this.cookInfo.id,
		}) 
	  }
	  
    },
    onReady() {


    },

    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
      this.imgDomain = process.env.VUE_APP_BASE_URL;
      this.startDate = this.getToday();
      this.id = option.id
      console.log("->option.id:" + option.id);
      this.getCook(this.id);
      this.getCuisineList();
      this.getSku();
    },





  };

</script>

<style lang="scss">
  .historyDetailContainer {
    ::v-deep .companyInfoContainer {
      position: absolute;
      top: 0rpx;
      left: 0rpx;

      .navigationBar {
        background: transparent;
      }
    }

  }

  .contentBox {
    .topBg {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      .bg {
        width: 100%;
        height: 504rpx;
      }

      .personalInfo {
        width: 690rpx;
        height: 472rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        position: absolute;
        margin-top: 232rpx;
        padding: 38rpx 26rpx;

        .line1 {
          display: flex;
          justify-content: space-between;
          margin-bottom: 24rpx;

          .bg {
            width: 126rpx;
            height: 204rpx;
            margin-right: 24rpx;
          }

          .middle {
            width: 350rpx;

            .m-1,
            .m-2 {
              display: flex;
            }

            .m-1 {
              font-weight: 500;
              font-size: 32rpx;
              color: #333333;
              display: flex;
              align-items: center;
              margin-bottom: 34rpx;

              .score {
                width: 74rpx;
                height: 32rpx;
                line-height: 32rpx;
                text-align: center;
                background-color: #FECF01;
                font-weight: 700;
                font-size: 16rpx;
                color: #FFFFFF;
                margin-left: 6rpx;
                border-radius: 10rpx;
              }
            }

            .m-2 {
              display: flex;
              margin-bottom: 24rpx;

              .m-2-type {
                padding: 0rpx 8rpx;
                height: 38rpx;
                line-height: 38rpx;
                background: rgba(217, 63, 17, 0.1);
                border-radius: 10rpx 10rpx 10rpx 10rpx;
                font-weight: 500;
                font-size: 20rpx;
                color: #D93F11;
                margin-right: 20rpx;
              }
            }

            .m-3 {
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }
          }

          .right {
            .r-1 {
              display: flex;
              margin-bottom: 84rpx;

              .like {
                width: 42rpx;
                height: 42rpx;
                margin-right: 14rpx;
              }

              .r-1-r {
                .line1 {
                  font-weight: 700;
                  font-size: 24rpx;
                  color: rgba(51, 51, 51, 0.6);
                }

                .line2 {
                  font-weight: 500;
                  font-size: 16rpx;
                  color: rgba(51, 51, 51, 0.6);

                }
              }
            }

            .r-2 {
              font-weight: 400;
              font-size: 20rpx;
              color: #333333;
            }

          }
        }

        .line2 {
          display: flex;
          margin-bottom: 15rpx;

          .dish {
            width: 202rpx;
            height: 130rpx;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            margin-right: 12rpx;
          }
        }

        .line3 {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .icon {
            width: 50rpx;
          }

          .icon1 {
            width: 26rpx;
          }

          .advantage {


            span {
              font-weight: 400;
              font-size: 24rpx;
              color: rgba(51, 51, 51, 0.8);
              margin-left: 8rpx;
            }
          }
        }
      }
    }

    .mouduleLine {
      width: 100%;
      overflow-x: scroll;
      padding-top: 218rpx;

      background: #FFF;

      .mouduleBox {
        display: flex;
        justify-content: space-between;
        padding: 0rpx 46rpx;
        width: 750rpx;

        background: #FFFFFF;
        box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .moudule {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 36rpx;
          /* color: #999999; */
          color: rgba(51, 51, 51, 0.6);

          height: 55rpx;

          white-space: nowrap;
          text-align: center;

        }

        .selected {
          border-bottom: 6rpx solid #FECF01;
          font-weight: 500;
          font-size: 18px;
          color: #333333;
          height: 60rpx;
        }
      }
    }

    .content {
      width: 100%;

      .cookInfo {
        width: 100%;
        padding: 23*2rpx;

        .infoDetail {
          margin-bottom: 27*2rpx;

          .head {
            font-size: 14*2rpx;
            font-weight: 500;
            color: #333333;
            margin-bottom: 12rpx;
          }

          .info {
            font-size: 12*2rpx;
            color: rgba(51, 51, 51, 0.8);
            display: flex;
            align-items: center;

            .label {
              font-size: 8*2rpx;
              color: #D93F11;
              border-radius: 5*2rpx;
              border: 1rpx solid #D93F11;
              width: 56*2rpx;
              height: 16*2rpx;
              line-height: 16*2rpx;
              text-align: center;
              margin-left: 12*2rpx;
            }

            .icon {
              width: 16*2rpx;
              height: 16*2rpx;
              margin-right: 10*2rpx;
            }
          }

        }
      }

      .works {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        image {
          width: 167*2rpx;
          height: 163*2rpx;
          margin-bottom: 11*2rpx;
        }
      }

      .comment {
        width: 100%;
        padding: 23*2rpx;

        .head {
          display: flex;
          margin-bottom: 11*2rpx;

          .left {
            font-size: 14*2rpx;
            font-weight: 500;
            color: #333333;
            margin-right: 12*2rpx;
          }

          .right {
            font-size: 10*2rpx;
            color: #333333;
          }
        }

        .commentLine {
          display: flex;
          margin-bottom: 11*2rpx;

          .title {
            width: 49*2rpx;
            height: 16*2rpx;
            font-size: 12*2rpx;
            color: rgba(51, 51, 51, 0.8);
            margin-right: 19*2rpx;
          }

          .stars {
            display: flex;

            image {
              width: 13*2rpx;
              height: 15*2rpx;
            }
          }
        }
      }

      .time {
        padding: 10*2rpx;
      }
    }
  }

  .zhanwei {
    width: 750rpx;
    height: 172rpx;
  }

  .fixBar {

    align-items: center;
    position: fixed;
    bottom: 0rpx;
    left: 0rpx;
    width: 750rpx;
    height: 172rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.15);
    border-radius: 68rpx 68rpx 0px 0px;

    image {
      width: 342*2rpx;
      height: 69*2rpx;
    }

  }

  .specificationsMask {
    z-index: 999 !important;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;

    .mask {
      width: 100%;
      flex: 1;

    }

    .specificationsPopup {
      width: 100%;
      height: 1080rpx;
      background-color: #FFFFFF;
      border-radius: 20rpx 20rpx 0rpx 0rpx;


      .productInfo {
        display: flex;
        border-bottom: 1rpx solid #DEDEDE;
        padding-bottom: 30rpx;
        margin: 40rpx 23rpx 0rpx;

        .selectedImg {
          width: 208rpx;
          height: 208rpx;
          margin-right: 24rpx;
        }

        .middleTxt {
          .productName {
            width: 384rpx;
            height: 50rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;

          }

          .type {
            padding: 0rpx 6rpx;
            height: 34rpx;
            background: rgba(217, 63, 17, 0.1);
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            font-size: 16rpx;
            color: #D93F11;
            line-height: 34rpx;
            text-align: center;
            display: inline-block;
            margin-top: 8rpx;
          }

          .price {
            margin-top: 12rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #D93F11;

          }
        }


      }

      .specifications {
        padding: 30rpx;

        .title {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 28rpx;
        }

        .speciLine {
          display: flex;
		  flex-wrap: wrap; /* 允许子元素换行 */
          .each {
            padding: 0rpx 16rpx;
            height: 40rpx;
            background: rgba(51, 51, 51, 0.1);
            border-radius: 214rpx 214rpx 214rpx 214rpx;
            margin-right: 28rpx;
			margin-bottom: 8rpx;
            font-weight: 500;
            font-size: 18rpx;
            color: rgba(51, 51, 51, 0.8);
            line-height: 40rpx;
          }

          .eachSelected {
            padding: 0rpx 16rpx;
            height: 40rpx;
            background: #FECF01;
            border-radius: 214rpx 214rpx 214rpx 214rpx;
            margin-right: 28rpx;
			margin-bottom: 8rpx;
            font-weight: 500;
            font-size: 18rpx;
            color: rgba(0, 0, 0, 0.8);
            line-height: 40rpx;
          }
        }

        .bar {
          width: 690rpx;
          height: 88rpx;
          background: rgba(51, 51, 51, 0.1);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 24rpx;
          padding-right: 36rpx;

          .left {
            font-weight: 500;
            font-size: 28rpx;
            color: rgba(51, 51, 51, 0.4);
          }

          image {
            width: 52rpx;
            height: 52rpx;
          }
        }

      }



      .productQuantity {
        margin: 0rpx 23rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 6rpx dotted #ccc;
        height: 120rpx;

        .left {
          .title {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          .stock {
            color: #999999;
            font-size: 22rpx;
            margin-top: 20rpx;
          }


        }

        .right {
          display: flex;

          .add,
          .subtraction {
            width: 70rpx;
            height: 70rpx;
            background: #F4F4F2;
            border-radius: 10rpx;
            text-align: center;
            line-height: 70rpx;
          }

          .currentNum {
            min-width: 70rpx;
            height: 70rpx;
            line-height: 70rpx;
            text-align: center;
            background: #FECF01;
            border-radius: 15rpx;
            margin: 0rpx 18rpx;
          }
        }

      }

      .buttons {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .buy {

          line-height: 98rpx;
          text-align: center;
          font-weight: 600;
          font-size: 32rpx;
          color: #333333;

          width: 692rpx;
          height: 98rpx;
          background: #FECF01;
          box-shadow: 0rpx 6rpx 10rpx 4rpx rgba(0, 0, 0, 0.07);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
        }
      }
    }
  }

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
</style>